<template>
  <div class="container">
      <div style="position: relative;" id="box">
        <div  id='left'>←</div>
        <div v-for="item in arr" :key="item.id">
        <img :src="item.image" alt="" id="banner" v-show="item.isShow" width="100%" height="100%">
        </div>
        <div id="right">→</div>
  
        </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      interval:'',
      arr:[
        {id:0,isShow:true,image:require('./imges/1.jpg')},
        {id:1,isShow:false,image:require('./imges/2.jpg')},
        {id:2,isShow:false,image:require('./imges/3.jpg')},
        {id:3,isShow:false,image:require('./imges/4.jpg')},
        
      ]
    }
  },
  created:function(){
    		this.startInterval();
    },
  methods:{

    changeImg :function(id){
    			var newData = this.arr;
    			for (var i = 0;i <newData.length; i++) {
    				if(newData[i].id==id)
    					newData[i].isShow=true;
    				else
    					newData[i].isShow=false;
    			}
    			this.arr = newData;
    		},
    		startInterval:function(){
    			let lun = this;
	    		this.interval = setInterval(function(){ 
		            lun.scollImg();
		        },3000)
    		},
	 scollImg:function(){
    			var newData = this.arr.filter(function(val){return val.isShow})[0];
    			if(newData.id==this.arr.length){
    				this.changeImg(1);
    			}else{
    				this.changeImg(newData.id+1);
    			}
    		},
    	
    	
  },
}
</script>

<style scoped>
    #box{
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin: auto;
      position:relative;
      width: 400px;
      height:300px;
      border: 1px solid #000;
    }
    #left{position: absolute;
    top:150px;
    font-size: 28px;
    width: 40px;
    height:35px;
    background: darkgray;
    opacity: 0.6;
    cursor: pointer;
    margin: auto;
    }
    #right{
        position: absolute;
        top:150px;
        left: 350px;
        font-size: 28px;
        width: 40px;
        height: 35px;
        background: darkgray;
        opacity: 0.5;
        text-align:right;
        cursor: pointer;
        margin: auto;
    }
    ul{
    position: absolute;
    left: 10%;
    top:170px
  }
  li{
      list-style: none;
      width: 20px;
      height: 10px;
      background: silver;
      opacity: 0.5;
      float: left;
      margin-left: 1px;
  }
  .bgc{
      background: red
  }

</style>
